<template>
  <div class="wrapper">
    <view class="no" v-if="nothing">暂无相关信息...</view>
    <view class="show" v-else>
      <view class="parent"><text v-if="parent * 1 > 0">上级: {{parent}}</text></view>
      <view class="user">自己: {{user}}</view>
      <view class="child">
        <view class="left"><text v-if="left * 1 > 0">左边: {{left}}</text></view>
        <view class="right"><text v-if="right * 1 > 0">右边: {{right}}</text></view>
      </view>
    </view>
  </div>
</template>

<script>
import base64 from '../../util/base64'
import config from '../../config/config'
import User from '../../api/user'
const userModel = new User()

export default {
  data() {
    return {
      user: 0,
      left: 0,
      right: 0,
      parent: 0,
      nothing: false
    }
  },
  methods: {
    fetch( ){
      userModel.pai().then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
        if (data.user_id) {
          this.user = data.user_id
          this.left = data.left_id
          this.right = data.right_id
          this.parent = data.parent_id
        } else {
          this.nothing = true
        }
      })
    }
  },
  created() {
    this.fetch()
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  .no {
    margin: 20rpx;
  }
  .show {
    margin: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    view {
      height: 80rpx;
      line-height: 80rpx;
      width: 200rpx;
      text-align: center;
      border: 1rpx solid #333333;
      border-radius: 10rpx;
      margin-top: 30rpx;
      &.child {
        border: none;
        margin-top: 0;
        display: flex;
        width: 100%;
        justify-content: center;
        .left {
          margin-right: 40rpx;
        }
      }
      &.user {
        background: #f3f5f7;
      }
    }
  }
}
</style>
